import React, {Component} from 'react';
import MyHeader from "../MyUIComponent/MyHeader";
import {Button, Form, Icon, Input, message, Upload} from "antd";
import {axiosPostFunction, baseUrl} from "../MyConfig/AppConfig";

class NewUser extends Component {

    // 点击【提交】按钮之后的函数
    onClickSubmit = (event) => {
        event.preventDefault();
        let form_obj = this.props.form;
        form_obj.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log("表单收到数据：", values);
                axiosPostFunction(
                    "/user/new",
                    values,
                    (received_data)=>{
                        this.props.form.resetFields();
                        message.success("添加成功")
                    },
                    ()=>{
                        message.error("添加失败")
                    })
            }
        });
    }

    // 两次校验密码
    validateToNextPassword = (rule, value, callback) => {
        const { form } = this.props;
        if (value && value !== form.getFieldValue('password')) {
            callback('两次输入密码不一致');
        } else {
            callback();
        }
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div>
                <MyHeader pathname="new_user"/>
                <div style={{ margin: "10px auto", width: 600, }}>
                    <h2 style={{ textAlign: "center" }}><strong>添加用户</strong></h2>
                    <Form onSubmit={this.onClickSubmit}>
                        <Form.Item>
                            {getFieldDecorator('username', {
                                rules: [
                                    { required: true, message: '请输入用户名！',},
                                ],
                            })(<Input placeholder="请输入用户名"/>)}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('password', {
                                rules: [
                                    { required: true, message: '请输入密码！',},
                                ],
                            })(<Input placeholder="请输入密码"/>)}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('confirm', {
                                rules: [
                                    { required: true, message: '请再次输入密码！',},
                                    {
                                        validator: this.validateToNextPassword,
                                    },
                                ],
                            })(<Input placeholder="请再次输入密码"/>)}
                        </Form.Item>
                        <Form.Item>
                            <Button htmlType="submit">提交</Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
}

export default Form.create()(NewUser);
